<template>
  <div class="wrapper">
    <div class="container-v">
      <div class="item-top">
        <header class="tabs_wrapper">
          <FunctionTabs></FunctionTabs>
        </header>
      </div>

      <a-divider></a-divider>

      <div class="item-bottom container-h">
        <div class="item-left">
          <div class="v">
            <Commander></Commander>
          </div>
        </div>

        <div class="item-right">
          <main class="table">
            <TableContent></TableContent>
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import FunctionTabs from "@/components/FunctionTabs/index.vue";
import TableContent from "@/components/TableContent/index.vue";

import Commander from "@/components/Commander/index.vue";

import autoLoadData from "@/mock";

export default defineComponent({
  components: { FunctionTabs, TableContent, Commander },

  setup() {},

  mounted() {
    autoLoadData();
  },
});
</script>



<style lang="less" scoped>
header.tabs_wrapper {
  max-width: 90vw;
  margin-left: auto;
  margin-right: auto;
}

main.table {
  min-height: 50vh;
}

div.v {
  margin: 25px 0 0 15px;
  max-height: 100vh;
  overflow: auto;
}

div.container-h {
  display: flex;
  flex-direction: row;

  > div.item-left {
    flex-grow: 0;
    padding: 0 auto;
    margin-right: 10px;
    flex-shrink: 0;
  }

  > div.item-right {
    flex-grow: 1;
    overflow: auto;
  }
}

div.container-v {
  display: flex;
  flex-direction: column;

  > div.item-top {
    flex-grow: 0;
    padding: 0 auto;
    margin-right: 10px;
    flex-shrink: 0;
  }

  > div.item-bottom {
    flex-grow: 1;
    overflow: auto;
  }
}
</style>
